<template>
  <div class="page">
    <div class="topSearch">
      <div class="title">
        <span
            style="
            width: 3px;
            height: 20px;
            background-color: #0f79e2;
            margin-right: 8px;
          "
        ></span
        ><span>工厂库存</span>
      </div>
      <div class="search">
        <span>产品名称：</span>
        <el-input
            clearable
            size="small"
            style="width: 250px"
            v-model="productName"
            placeholder="请输入产品名称"
        ></el-input>
        <span>产品编码：</span>
        <el-input
            clearable
            size="small"
            style="width: 250px"
            v-model="productCode"
            placeholder="请输入产品编码"
        ></el-input>

        <!-- <span>预警状态：</span>
        <el-input
          clearable
          size="small"
          style="width: 250px"
          v-model="stockStatus"
          placeholder="请输入预警状态"
        ></el-input> -->

        <span
            v-if="
            ['admin', '赵凤娇', '石友成'].some((value) =>
              userName.includes(value)
            )
          "
        >选择工厂：</span
        >
        <el-select
            v-if="
            ['admin', '赵凤娇', '石友成'].some((value) =>
              userName.includes(value)
            )
          "
            clearable
            v-model="factoryId"
            size="small"
            style="width: 250px"
            placeholder="请选择工厂"
        >
          <el-option
              v-for="item in factoryList"
              :key="item.factoryId"
              :label="item.factoryName"
              :value="item.factoryId"
          />
        </el-select>

        <span
            v-if="
            ['admin', '赵凤娇', '石友成'].some((value) =>
              userName.includes(value)
            )
          "
        >预警状态：</span
        >
        <el-select
            v-if="
            ['admin', '赵凤娇', '石友成'].some((value) =>
              userName.includes(value)
            )
          "
            clearable
            v-model="stockStatus"
            size="small"
            style="width: 250px"
            placeholder="请选择预警状态"
        >
          <el-option
              v-for="item in stockOptions"
              :key="item.stockStatus"
              :label="item.stockName"
              :value="item.stockStatus"
          />
        </el-select>

        <el-button
            size="small"
            type="primary"
            style="width: 80px; margin-left: 20px"
            @click="getFactoryInventoryList"
        >
          查询
        </el-button>
        <el-button
            size="small"
            style="width: 80px; margin-left: 20px"
            @click="reset"
        >
          重置
        </el-button>

        <!-- </el-col> -->
      </div>
    </div>
    <div class="centerTable">
      <div style="display: flex;margin-bottom: 10px">
        <div style="height: 32px">
          <el-upload
              multiple
              class="uploader-wrap"
              :headers="headers"
              :action="`${$apiHost}/common/fileImgUrl`"
              :on-success="uploadSuccess"
              :show-file-list="false"
          >
            <el-button size="small" type="primary" @click="uploadExcel(1)"
            >入库点击上传表格
            </el-button
            >
          </el-upload>
        </div>
        <div style="height: 32px; margin-left: 20px">
          <el-upload
              multiple
              class="uploader-wrap"
              :headers="headers"
              :action="`${$apiHost}/common/fileImgUrl`"
              :on-success="uploadSuccess"
              :show-file-list="false"
          >
            <el-button size="small" type="primary" @click="uploadExcel(2)"
            >出库点击上传表格
            </el-button
            >
          </el-upload>
        </div>
        <el-button size="small" type="primary" style="margin-left: 20px" @click="exportExcel">全量导出表格</el-button>
      </div>
      <el-table
          :data="factoryInventoryData"
          border
          height="calc(100vh - 350px)"
          :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
          v-loading="loading"
          :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }"
      >
        <el-table-column prop="id" label="ID" width="80px"/>
        <el-table-column prop="productName" label="产品名称"/>
        <el-table-column prop="productCode" label="产品编码"/>
        <el-table-column prop="norms" label="规格"/>
        <el-table-column prop="unit" label="单位"/>
        <el-table-column prop="inventoryNum" label="库存数量"/>
        <el-table-column label="预警值">
          <template slot-scope="scope">
            {{ (scope.row.exigencyNum || 0) + '-' + (scope.row.warningNum||0) }}
          </template>
        </el-table-column>
        <el-table-column label="预警状态">
          <template slot-scope="scope">
            <span v-if="scope.row.stockStatus == 1">正常</span>
            <span v-if="scope.row.stockStatus == 2" style="color: #f5b330"
            >警告</span
            >
            <span v-if="scope.row.stockStatus == 3" style="color: red"
            >紧急</span
            >
          </template>
        </el-table-column>
        <!--          <template slot-scope="scope">-->
        <!--            <el-input-number v-model="scope.row.inventoryNum" @change="handleChange(scope.row)" size="mini" :min="0"-->
        <!--                             label="描述文字"></el-input-number>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="factoryId" label="所属工厂" width="150px">
          <template slot-scope="scope">
            <div
                class="warehouseTag"
                v-if="scope.row.factoryId === 1"
                style="
                border: 1px solid #f5b330;
                background-color: #fef7ea;
                color: #f5b330;
              "
            >
              <img src="@/assets/svg/hubei.svg" class="warehouse_icon"/><span
            >佛山一号工厂</span
            >
            </div>
            <div
                class="warehouseTag"
                v-if="scope.row.factoryId === 7"
                style="
                border: 1px solid #f5b330;
                background-color: #fef7ea;
                color: #f5b330;
              "
            >
              <img src="@/assets/svg/hubei.svg" class="warehouse_icon"/><span
            >泉州工厂</span
            >
            </div>
            <div
                class="warehouseTag"
                v-if="scope.row.factoryId === 2"
                style="
                border: 1px solid #787cfc;
                background-color: #f1f2ff;
                color: #787cfc;
              "
            >
              <img
                  src="@/assets/svg/ningxiangyi.svg"
                  class="warehouse_icon"
              /><span>佛山二号工厂</span>
            </div>
            <div
                class="warehouseTag"
                v-if="scope.row.factoryId === 3"
                style="
                border: 1px solid #497ff4;
                background-color: #f1f5fe;
                color: #497ff4;
              "
            >
              <img
                  src="@/assets/svg/guangdong.svg"
                  class="warehouse_icon"
              /><span>广西一号工厂</span>
            </div>
            <div
                class="warehouseTag"
                v-if="scope.row.factoryId === 4"
                style="
                border: 1px solid #4dc8ee;
                background-color: #edf9fd;
                color: #4dc8ee;
              "
            >
              <img src="@/assets/svg/guangxi.svg" class="warehouse_icon"/><span
            >侧网工厂</span
            >
            </div>
            <div
                class="warehouseTag"
                v-if="scope.row.factoryId === 0"
                style="
                border: 1px solid #00acf1;
                background-color: #e5f7f1;
                color: #00acf1;
              "
            >
              <img src="@/assets/svg/yunnan.svg" class="warehouse_icon"/><span
            >其他</span
            >
            </div>
            <div
                class="warehouseTag"
                v-if="scope.row.factoryId === 5"
                style="
                border: 1px solid #4dc8ee;
                background-color: #edf9fd;
                color: #4dc8ee;
              "
            >
              <img src="@/assets/svg/guangxi.svg" class="warehouse_icon"/><span
            >地柜工厂</span
            >
            </div>
            <div
                class="warehouseTag"
                v-if="scope.row.factoryId === 6"
                style="
                border: 1px solid #4dc8ee;
                background-color: #edf9fd;
                color: #4dc8ee;
              "
            >
              <img src="@/assets/svg/guangxi.svg" class="warehouse_icon"/><span
            >地柜工厂</span
            >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="warehousePosition" label="库位">
          <template v-slot="scope">
            <div v-if="editingIndex !== scope.$index"
                 @click="cellClick(scope.row, scope.row.warehousePosition, scope.$index)">
              {{ scope.row.warehousePosition || '-' }}
            </div>
            <el-input v-else
                      size="small"
                      style="border: 1px solid #eee"
                      placeholder="请输入"
                      v-model="scope.row.warehousePosition"
                      @blur="changeWarehousePosition(scope.row, scope.$index, scope.row.warehousePosition)">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <div style="display: flex; flex-direction: column">
              <div
                  style="
                  display: flex;
                  justify-content: space-between;
                  margin: 0 18px;
                "
              >
                <el-link
                    style="text-decoration: none"
                    type="primary"
                    @click="addInventory('add', scope.row)"
                >入库
                </el-link
                >
                <el-link
                    style="text-decoration: none"
                    type="primary"
                    @click="addInventory('subtract', scope.row)"
                >出库
                </el-link
                >
              </div>
              <el-link
                  style="text-decoration: none"
                  type="success"
                  @click="historyList(scope.row)"
              >修改记录
              </el-link
              >
              <el-link
                  style="text-decoration: none"
                  type="warning"
                  @click="editWarning(scope.row)"
              >修改预警值
              </el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        style="padding: 20px 0"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
    >
    </el-pagination>
    <el-dialog
        :close-on-click-modal="false"
        title="新增产品"
        :visible.sync="addDialog"
        width="40%"
        center
        v-loading="loading"
        :show-close="false"
        :before-close="handleClose"
    >
      <div style="display: flex; align-items: center; margin-bottom: 30px">
        <div style="width: 80px; text-align: center">
          <span style="color: red">*</span>产品名称：
        </div>
        <el-input
            size="small"
            v-model="addForm.productName"
            style="width: 80%"
        ></el-input>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 30px">
        <div style="width: 80px; text-align: center">
          <span style="color: red">*</span>产品编码：
        </div>
        <el-input
            size="small"
            v-model="addForm.productCode"
            style="width: 80%"
        ></el-input>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 30px">
        <div style="width: 80px; text-align: center">
          <span style="color: red">*</span>所属工厂：
        </div>
        <el-select
            clearable
            v-model="addForm.factoryId"
            size="small"
            style="width: 80%"
            placeholder="请选择"
        >
          <el-option
              v-for="item in factoryList"
              :key="item.factoryId"
              :label="item.factoryName"
              :value="item.factoryId"
          />
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 30px">
        <div style="width: 80px; text-align: center">
          <span style="color: red">*</span>单价：
        </div>
        <el-input
            size="small"
            v-model="addForm.price"
            style="width: 80%"
        ></el-input>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 30px">
        <div style="width: 80px; text-align: center">规格：</div>
        <el-input
            size="small"
            v-model="addForm.norms"
            style="width: 80%"
        ></el-input>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 30px">
        <div style="width: 80px; text-align: center">单位：</div>
        <el-input
            size="small"
            v-model="addForm.unit"
            style="width: 80%"
        ></el-input>
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 30px">
        <div style="width: 80px; text-align: center">颜色：</div>
        <el-input
            size="small"
            v-model="addForm.color"
            style="width: 80%"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        :close-on-click-modal="false"
        :title="updateType == 1 ? '入库' : '出库'"
        :visible.sync="addInventoryNum"
        width="30%"
        center
        :show-close="false"
        :before-close="closeAdd"
    >
      <span>库存数量：</span>
      <el-input
          style="width: 300px"
          size="small"
          v-model="addInventoryCount"
      ></el-input>
      <div
          style="color: grey; margin-top: 10px; font-size: 12px"
          v-if="updateType == 2"
      >
        * 减库存请填负数（例：-200）
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addInventoryNum = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="修改记录"
        :close-on-click-modal="false"
        :visible.sync="historyInventoryNum"
        width="60%"
        center
        :show-close="false"
        :before-close="closeHistory"
    >
      <el-table
          :data="historyData"
          border
          :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
          :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }"
      >
        <el-table-column prop="productCode" label="产品编码"/>
        <el-table-column prop="userName" label="修改人"/>
        <el-table-column prop="createTime" label="修改时间"/>
        <el-table-column prop="num" label="修改数量"/>
      </el-table>
    </el-dialog>
    <el-dialog
        title="修改预警值"
        :visible.sync="openWarning"
        width="25%"
        :close-on-click-modal="false"
        center
        :show-close="false"
        :before-close="handleClose"
    >
      <div style="display: flex; align-items: center; margin-top: 10px">
        <span>库存警告值：</span>
        <el-input-number v-model="warningNum" :min="0"></el-input-number>
      </div>
      <div style="display: flex; align-items: center; margin-top: 10px">
        <span>紧急补货值：</span>
        <el-input-number v-model="exigencyNum" :min="0"></el-input-number>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openWarning = false">取 消</el-button>
        <el-button type="primary" @click="submitWarning">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 入库EXCEl表格弹窗展示 -->
    <el-dialog
        title="上传入库表格"
        :visible.sync="openStoreTable"
        width="45%"
        :close-on-click-modal="false"
        center
        :show-close="false"
        :before-close="handleClose"
        style="height: calc(100vh - 350px); overflow-y: auto"
    >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
            v-for="col in columns"
            :key="col.prop"
            :prop="col.prop"
            :label="col.label"
        >
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="openStoreTable = false">取 消</el-button>
        <el-button type="primary" @click="submitExcel">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 出库EXCEl表格弹窗展示 -->
    <el-dialog
        title="上传出库表格"
        :visible.sync="openOutTable"
        width="45%"
        :close-on-click-modal="false"
        center
        :show-close="false"
        :before-close="handleClose"
    >
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column
            v-for="col in columns"
            :key="col.prop"
            :prop="col.prop"
            :label="col.label"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openOutTable = false">取 消</el-button>
        <el-button type="primary" @click="submitExcel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as XLSX from "xlsx-js-style";

export default {
  data() {
    return {
      fileList1: [], // 入库表格展示
      fileList2: [], // 出库表格展示
      editingIndex: null,
      columns: [
        // 入库表格列
        {prop: 'factoryId', label: '工厂ID'},
        {prop: 'productCode', label: '编码'},
        {prop: 'productName', label: '产品名称'},
        {prop: 'norms', label: '规格尺寸'},
        {prop: 'colour', label: '颜色'},
        {prop: 'unit', label: '单位'},
        {prop: 'count', label: '数量'},
      ],
      formData: {
        // excelPath: '',
        type: 0, // 入出库类型
        file: null,
      }, // 上传表格参数
      productName: '',
      userName: '',
      warningNum: '',
      exigencyNum: '',
      userId: '',
      productCode: '',
      factoryName: '',
      updateType: 0, // 修改库存类型
      stockStatus: '', // 库存预警状态
      addInventoryCount: '',
      pageSize: 20,
      pageNumber: 1,
      currentPage: 1,
      factoryId: '',
      totalCount: 0,
      loading: false,
      openWarning: false,
      openStoreTable: false, // 入库表格弹窗
      openOutTable: false, // 出库表格弹窗
      tableData: [], // 入库表格数据
      tableData1: [], // 出库表格数据
      addDialog: false,
      addInventoryNum: false,
      historyInventoryNum: false,
      addForm: {},
      historyData: [],
      stockOptions: [
        {
          stockStatus: 1,
          stockName: '正常',
        },
        {
          stockStatus: 2,
          stockName: '警告',
        },
      ],
      factoryList: [],
      warehouseList: [],
      factoryInventoryData: [],
    }
  },
  created() {
    let data = JSON.parse(window.localStorage.getItem('userData'))
    this.userName = data.userName
    if (data.id == 159) this.factoryId = 1
    if (data.id == 160) this.factoryId = 2
    if (data.id == 161) this.factoryId = 3
    if (data.id == 162) this.factoryId = 4
    if (data.id == 163) this.factoryId = 0
    if (data.id == 164) this.factoryId = 5
    this.getFactoryList()
    this.getFactoryInventoryList()
  },
  computed: {
    headers() {
      const token = this.$quinn.getStorage('token')
      return {
        token,
      }
    },
  },
  methods: {
    getFactoryId(val) {
      switch (val) {
        case 1:
          return '佛山一号工厂';
        case 2:
          return '佛山二号工厂';
        case 3:
          return '广西一号工厂';
        default:
          return '未知工厂';
      }
    },
    getStockStatus(val) {
      switch (val) {
        case 1:
          return '正常';
        case 2:
          return '警告';
        case 3:
          return '紧急';
        default:
          return '未知';
      }
    },
    async exportExcel() {
      const params = {
        factoryId: this.factoryId,
        pageSize: 100000,
        pageNumber: 1
      }
      const res = await this.$api.factoryGetFactoryMaterialList(params)
      if (res.data.length == 0) return this.$message.warning('该工厂暂无产品！')
      const wb = XLSX.utils.book_new();
      let data = [
        ['产品名称', '产品编码', '规格', '单位', '库存数量', '预警值', "预警状态", "所属工厂", "库位", "创建时间"]]
      res.data.map(el => {
        const warningCount = el.exigencyNum || 0 + '-' + el.warningNum || 0
        data.push([el.productName, el.productCode, el.norms, el.unit, el.inventoryNum, warningCount, this.getStockStatus(el.stockStatus), this.getFactoryId(el.factoryId), el.warehousePosition, el.createTime])
      })
      const ws = XLSX.utils.aoa_to_sheet(data);
      ws['!cols'] = [
        {wpx: 150}, // 第一列宽度为100单位
        {wpx: 100},
        {wpx: 100},
        {wpx: 100},
        {wpx: 100},
        {wpx: 100},
        {wpx: 100},
        {wpx: 100},
        {wpx: 150},
        {wpx: 150},
      ];
      ws["F1"].s = {
        alignment: {horizontal: "center"},
        font: {blod: true, color: {rgb: "000000"}},
        fill: {fgColor: {rgb: "ff6a00"}},
      };
      ws["G1"].s = {
        alignment: {horizontal: "center"},
        font: {blod: true, color: {rgb: "000000"}},
        fill: {fgColor: {rgb: "ff6a00"}},
      };
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      const wbout = XLSX.write(wb, {bookType: "xlsx", type: "binary"});

      // 创建一个 Blob 对象
      const blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream",
      });

      // 使用 Blob 对象创建一个链接
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = `工厂库存${this.getFactoryId(this.factoryId) || ''}${new Date().getTime()}.xlsx`;

      // 触发下载
      link.click();

      // 清理
      URL.revokeObjectURL(link.href);

      function s2ab(s) {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
    },

    changeWarehousePosition(row, index, value) {
      this.editingIndex = null // 退出编辑状态
      this.$api.factoryUpdateFactoryWareHousePosition({
        id: row.id,
        warehousePosition: value
      }).then(res => {
        this.$message.success('库位更新成功')
      }).catch(() => {
        this.$message.error('更新失败')
      })
    },
    cellClick(row, value, index) {
      this.editingIndex = index
      this.$nextTick(() => {
        // 可选：自动聚焦 input
        const input = this.$el.querySelectorAll('.el-input__inner')[index]
        input && input.focus()
      })
    },

    /**
     * 方法说明
     * author: iceyhu
     * description: 提交出入库
     * @param type
     * @return
     * @createTime: DATE_TIME
     */
    submitExcel() {
      // const materialList = this.tableData.map((item) => {
      //   return {
      //     productCode: item.productCode,
      //     count: item.count,
      //   }
      // })
      const data = {
        materialList: this.tableData,
        type: this.formData.type,
        factoryId: this.tableData[0].factoryId,
        // materialList,
      }

      this.$api.materialInventoryFactoryInOutExcle(data).then((res) => {
        if (res == 1) {
          if (this.formData.type == 1) {
            this.openStoreTable = false
          } else if (this.formData.type == 2) {
            this.openOutTable = false
          }
          this.$message.success('上传成功')
        } else {
          if (res.code == 501) {
            this.$message.warning(res.msg)
          }
        }
      })
    },
    /**
     * 方法说明
     * author: iceyhu
     * description: 点击入出库
     * @param
     * @return
     * @createTime: DATE_TIME
     */
    uploadExcel(type) {
      // console.log('type', type)
      this.formData.type = type
    },
    /**
     * 方法说明
     * author: iceyhu
     * description: 表格上传
     * @param
     * @return
     * @createTime: DATE_TIME
     */
    uploadSuccess(response, file, fileList) {
      if (response.code == 200 && response.result) {
        const formData = new FormData()
        formData.append('type', this.formData.type)
        formData.append('file', file.raw)
        this.$api
            .materialInventoryFactoryInOutListExcleList(formData)
            .then((res) => {
              console.log('tableData', res)
              if (res.length) {
                if (this.formData.type == 1) {
                  // 入库
                  this.openStoreTable = true
                  this.tableData = res
                } else if (this.formData.type == 2) {
                  // 出库
                  this.openOutTable = true
                  this.tableData1 = res
                }
              } else if (!res.result) {
                if (res.code == 501) {
                  this.$message.success(res.msg)
                }
              }
            })
      }
    },
    // handleChange(val) {
    //   console.log(val)
    //   const data = {
    //     factoryId: val.factoryId,
    //     inventoryNum: val.inventoryNum,
    //     productId: val.id
    //   }
    //   this.$api.factoryUpdateFactoryInventoryNum(data).then(res => {
    //     if (res == 1) {
    //       this.$message({ message: "操作成功！", type: 'success' })
    //       this.getFactoryInventoryList()
    //     }
    //   })
    // },
    handleClose() {
    },
    submit() {
      if (
          this.addForm.productName &&
          this.addForm.productCode &&
          this.addForm.factoryId &&
          this.addForm.price
      ) {
        this.$api.factoryAddFactoryMaterial(this.addForm).then((res) => {
          if (res == 1) {
            this.$message({message: '操作成功！', type: 'success'})
            this.addDialog = false
            this.getFactoryInventoryList()
          }
        })
      } else {
        this.$message({message: '请检查必填项！', type: 'warning'})
      }
    },
    addProduct() {
      this.addDialog = true
      this.addForm = this.$options.data.call(this).addForm
    },
    getFactoryList() {
      this.$api.factoryGetFactoryList().then((res) => {
        this.factoryList = res
      })
    },
    getFactoryInventoryList() {
      this.loading = true
      const params = {
        productName: this.productName,
        productCode: this.productCode,
        stockStatus: this.stockStatus,
        factoryId: this.factoryId,
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
      }
      this.$api.factoryGetFactoryMaterialList(params).then((res) => {
        this.loading = false
        this.totalCount = res.total
        this.factoryInventoryData = res.data
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getFactoryInventoryList()
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.getFactoryInventoryList()
    },
    reset() {
      this.productCode = ''
      this.productName = ''
      this.stockStatus = ''
      this.factoryId = ''
      this.pageSize = 20
      this.pageNumber = 1
      this.getFactoryInventoryList()
    },
    /**
     * 方法说明
     * author: iceyhu
     * description:
     * @param updateType 更新类型
     * @param row 指定行修改的参数
     * @return
     * @createTime: DATE_TIME
     */
    addInventory(updateType, row) {
      console.log('updateType', updateType)
      console.log('row', row)
      if (updateType == 'add') {
        this.updateType = 1
      } else if (updateType == 'subtract') {
        this.updateType = 2
      }
      this.addInventoryCount = ''
      this.addInventoryNum = true
      this.addFactoryId = row.factoryId
      this.addProductId = row.productCode
      this.addId = row.id
      this.addCount = row.inventoryNum
    },
    closeAdd() {
      this.addInventoryNum = false
    },
    submitAdd() {
      const data = {
        factoryId: this.addFactoryId,
        type: this.updateType,
        inventoryNum: Number(this.addInventoryCount),
        productId: this.addId,
        productCode: this.addProductId,
      }
      if (Number(this.addInventoryCount) + this.addCount < 0)
        return this.$message({message: '现有库存不足！'})
      this.$api.factoryUpdateFactoryInventoryNum(data).then((res) => {
        if (res == 1) {
          this.$message({message: '操作成功！', type: 'success'})
          this.addInventoryNum = false
          this.getFactoryInventoryList()
        }
      })
    },
    closeHistory() {
      this.historyInventoryNum = false
    },
    historyList(row) {
      this.historyInventoryNum = true
      const params = {
        factoryId: row.factoryId,
        productCode: row.productCode,
      }
      this.$api.purchaseGetFactoryInRecord(params).then((res) => {
        this.historyData = res
      })
    },
    submitWarning() {
      if (this.exigencyNum > this.warningNum)
        return this.$message({message: '紧急补货值不可大于预警值！'})
      const data = {
        warningNum: this.warningNum,
        exigencyNum: this.exigencyNum,
        factoryId: this.factoryId,
        materialId: this.ids,
      }
      this.$api.factoryUpdateFactoryWarningNum(data).then((res) => {
        if (res == 1) {
          this.$message({message: '操作成功！', type: 'success'})
          this.openWarning = false
          this.factoryId = ''
          this.getFactoryInventoryList()
        }
      })
    },
    editWarning(row) {
      this.openWarning = true
      this.factoryId = row.factoryId
      this.ids = row.id
      this.warningNum = row.warningNum
      this.exigencyNum = row.exigencyNum
    },
  }
  ,
}
</script>
<style lang="less" scoped>
.title {
  display: flex;
  margin-left: 20px;

  span {
    display: flex;
    margin-top: 20px;
  }
}

.topSearch {
  width: 100%;
  height: 110px;
  box-shadow: inset 0 20px 10px rgba(0, 128, 255, 0.2);
  border-bottom: 1px solid rgba(0, 128, 255, 0.08);

  .search {
    display: flex;
    align-items: center;
    margin-top: 15px;

    span {
      margin-left: 20px;
    }
  }
}

.centerTable {
  margin-top: 20px;

  /deep/ .el-input__inner {
    border: none !important;
  }

  /deep/ .el-input-number--mini {
    width: 120px;
  }

  /deep/ .el-input--mini .el-input__inner {
    font-size: 15px;
  }
}

/deep/ .el-input-number--mini .el-input-number__increase {
  border-radius: 50px !important;
  background-color: #0f79e2 !important;
  color: #fff !important;
  width: 25px;
  height: 25px;
  line-height: 25px;
}

/deep/ .el-input-number--mini .el-input-number__decrease {
  border-radius: 50px !important;
  color: #1e293b !important;
  background-color: #fff;
  border: 1px solid #a6a9ad;
  width: 25px;
  height: 25px;
  line-height: 25px;
}

.warehouseTag {
  display: flex;
  justify-content: center;
  height: 30px;
  align-items: center;
  border-radius: 50px;
  margin-left: 10px;
  margin-right: 10px;
}

.warehouse_icon {
  width: 20px;
  height: 20px;
  margin-right: 3px;
}

/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-dialog__title {
  color: #fff;
}

/deep/ .center {
  border-radius: 20px;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>
